
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定制旅游</title>
    <link href="${pageContext.request.contextPath}/css/travel/formulate_travel.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/formulate_travel/formulate_travel.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js" rel="stylesheet"></script>

</head>
<body>
<!--===================1.头部导航 nav=================-->
<c:import url="/header/header.jsp"/>
<!--===================2.主体=================-->
<div class="main">
    <div class="main-info">
        <!--进度条-->
        <div class="info-ProgressBar">
            <h1>定制旅游</h1>
        </div>
        <!--出游基本信息-->
        <div class="info-details">
            <div class="info-details-title">
                <i class="one"></i><h3>出游基本信息</h3>
            </div>
            <div class="layui-inline input">
                <div class="layui-input-block">
                    <input type="text" name="must" id="startProvince" lay-verify="title" autocomplete="off" class="layui-input" placeholder="出发地">
                </div>
            </div>
            <div class="layui-inline input">
                <div class="layui-input-block">
                    <input type="text" name="must" id="endCity" lay-verify="identity" placeholder="目的地" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline input">
                <div class="layui-input-block">
                    <input type="text" name="must" id="startDate" autocomplete="off" class="layui-input" placeholder="出行日期">
                </div>
            </div>
            <div class="layui-inline input">
                <div class="layui-input-block">
                    <input type="text" name="must" id="endDate" autocomplete="off" class="layui-input" placeholder="返程日期">
                </div>
            </div>
        </div>
        <!--出行人数及预算-->
        <div class="info-details">
            <div class="info-details-title">
                <i class="two"></i><h3>出行人数及预算</h3>
            </div>

            <div class="layui-inline input">
                <div class="layui-input-block">
                    <input type="text" name="must" id="numberAdults" lay-verify="title" autocomplete="off" class="layui-input" placeholder="成人数">
                    <span>位</span>
                </div>
            </div>
            <div class="layui-inline input">
                <div class="layui-input-block">
                    <input type="text" name="must" id="numberChild" lay-verify="title" autocomplete="off" class="layui-input" placeholder="儿童数">
                    <span>位</span>
                </div>
            </div>
<%--            <div class="layui-inline input">--%>
<%--                <div class="layui-input-block">--%>
<%--                    <input type="text" name="budget" lay-verify="title" autocomplete="off" class="layui-input" placeholder="人均预算（选填）">--%>
<%--                    <span>元</span>--%>
<%--                </div>--%>
<%--            </div>--%>
        </div>
        <!--联系人信息-->
        <div class="info-details">
            <div class="info-details-title">
                <i class="three"></i><h3>联系人信息</h3>
            </div>

            <div class="layui-inline input">
                <div class="layui-input-block">
                    <input type="text" name="must" id="custName" lay-verify="title" autocomplete="off" class="layui-input" placeholder="姓名">
                </div>
            </div>

            <div class="layui-inline input">
                <div class="layui-input-block">
                    <input type="text" name="must" id="custTel" lay-verify="title" autocomplete="off" class="layui-input" placeholder="手机号码">
                </div>
            </div>
        </div>
        <!--商品景点信息-->
        <div class="pro-info">
            <div class="pro-main-img" >
                <img src="${pageContext.request.contextPath}/images/submit_order/zhizuoxiaotu.png">
            </div>
            <div class="pro-details" >
                <h2>
                    <a>旅游定制</a>
                </h2>
                <ul>
                    <li>
                        <p>
                            <b>出行天数</b>
                            <em class="itineraryTravelDays">0</em>
                            <span>天</span>
                        </p>
                        <p>
                            <b>出行日期</b>
                            <i>请选择</i>
                        </p>
                        <p>
                            <b>出行人数</b>
                            <span>成人</span>
                            <em class="numberAdults">0</em>
                            <span>儿童</span>
                            <em class="numberChild">0</em>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <!--订单提交信息-->
        <div class="submit-order-btn">
<%--            <div class="order-btn">--%>
<%--                提交需求--%>
<%--            </div>--%>
    <div class="order-btn" id="sumbit-btn">
        <button id="gopay" style="height: 100%;width: 100%;background-color: #00FFFF" value="确认订购">确认订购</button>
    </div>
        </div>
    </div>
</div>
<!--===================3.底部=================-->
<div class="footer">

</div>
<script>
    var itineraryTravelDays = sessionStorage.getItem("itineraryTravelDays");
    console.log("data.itineraryPlan.itineraryTravelDays:" + itineraryTravelDays);

    var numberAdults = parseFloat(sessionStorage.getItem("numberAdults"));
    console.log("data.itineraryPlan.numberAdults:" + numberAdults);

    var numberChild = parseFloat(sessionStorage.getItem("numberChild"));
    console.log("data.itineraryPlan.numberChild:" + numberChild);

    var startProvince = sessionStorage.getItem("startProvince");
    console.log("data.itineraryPlan.startProvince:" + startProvince);

    var endCity = sessionStorage.getItem("endCity");
    console.log("data.itineraryPlan.v:" + endCity);

    var itineraryPlanId = sessionStorage.getItem("itineraryPlanId");
    console.log("data.itineraryPlan.itineraryPlanId:" + itineraryPlanId);

    var travelSightsName = sessionStorage.getItem("travelSightsName");
    console.log("data.itineraryPlan.travelSights:" + travelSightsName);

    var travelTicketsPrice = parseFloat(sessionStorage.getItem("travelTicketsPrice"));
    console.log(typeof (travelTicketsPrice));
    console.log("data.travelSights.travelTicketsPrice:" + travelTicketsPrice);

    var itineraryBudget = parseFloat(sessionStorage.getItem("itineraryBudget"));
    console.log(typeof (itineraryBudget));
    console.log("data.itineraryPlan.itineraryBudget:" + itineraryBudget);

    $(".itineraryTravelDays").text(itineraryTravelDays);
    $(".numberAdults").text(numberAdults);
    $(".numberChild").text(numberChild);

    $('#startProvince').val(startProvince);
    $("#startProvince").attr("disabled","disabled");

    $('#endCity').val(endCity);
    $("#endCity").attr("disabled","disabled");

    $('#numberAdults').val(numberAdults);
    $("#numberAdults").attr("disabled","disabled");

    $('#numberChild').val(numberChild);
    $("#numberChild").attr("disabled","disabled");

    var custName = '${loginCustomer.custName}';
    console.log("custName" + custName);
    $('#custName').val(custName);
    $("#custName").attr("disabled","disabled");

    var custTelno = '${loginCustomer.custTelno}';
    console.log("custTelno" + custTelno);
    $('#custTel').val(custTelno);
    $("#custTel").attr("disabled","disabled");

    $(".order-btn").click(function () {

        //获取出行日期

        //获取费用

        if('${loginCustomer.custName}'.length == 0 && '${loginCustomer.custTelno}'.length == 0 && '${loginCustomer.custEmail}'.length == 0){
            alert("请先完成登录或注册！");
            window.location.href ="${pageContext.request.contextPath}/customer/login.jsp";
        }else if ('${loginCustomer.custName}'.length == 0 || '${loginCustomer.custEmail}'.length == 0){
            alert("请先完成个人信息绑定!");
            window.location.href ="${pageContext.request.contextPath}/customer/binding_set.jsp";
        }else{



        var count = 0;
        var dp = document.getElementsByName('must');
        console.log("======================" + dp.length);

        $("input[type='text']").each(function () {
            if ($(this).val().length == 0) {
                alert("请填写信息！");
                // $(this).after('<span style="float: right" name="input_error"><font color="red">请填写信息' +
                //     '</font></span>');
            }else{
                count = count + 1;
            }

            if (count == dp.length){
                // var data = $("#startDate").val();
                var date = "2021-8-18";
                var url = "${pageContext.request.contextPath}/save";
                console.log(travelTicketsPrice*(numberAdults + numberChild*0.7));
                var pricecost = itineraryBudget + travelTicketsPrice*(numberAdults + numberChild*0.7);
                console.log("url:" + url);
                console.log("pricecost:" + pricecost);
                $.ajax({url : url,
                    type: "POST",
                    dataType:"json",
                    data:{"custName": custName,"custTel": custTelno,"travelName":travelSightsName,"audltNum":numberAdults,"childNum":numberChild,"myorderDate":date,"myorderPrice":pricecost,"itineraryId":itineraryPlanId},
                    success:function (result) {
                        console.log("result json:" + JSON.stringify(result));
                        var myorderId = result.myorderId;
                        var orderNo = result.myorderNo;
                        var productName = travelSightsName;
                        var myorderPrice = pricecost;
                        console.log("myorderId:" + myorderId);
                        console.log("orderNo" + orderNo);
                        console.log("productName" + productName);
                        console.log("myorderPrice" + myorderPrice);

                        $("#gopay").after('<form name="payForm" action="<%=request.getContextPath() %>/ali/pay" method="post">\n' +
                            '<input type="hidden" name="orderId" value=" ' + orderNo + '"/>\n' +
                            '<input type="hidden" name="productName" value="' + productName + '">\n' +
                            '<input type="hidden" name="myorderPrice" value=" ' + myorderPrice + ' "/>\n' +
                            '<input class="submitBtn" style="display:none" type="submit" value="支付">\n' +
                            '</form>');
                        $(".submitBtn").click();
                    }
                });
            }

        });
        }
    });

</script>
<script src="${pageContext.request.contextPath}/dist/layui/layui.js" charset="utf-8"></script>
</body>
</html>